<!doctype html>
<html class="default no-js">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>monaco-editor</title>
	<meta name="description" content="Documentation for monaco-editor">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
	<div class="tsd-page-toolbar">
		<div class="container">
			<div class="table-wrap">
				<div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
					<div class="field">
						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
						<input id="tsd-search-field" type="text" />
					</div>
					<ul class="results">
						<li class="state loading">Preparing search index...</li>
						<li class="state failure">The search index is not available</li>
					</ul>
					<a href="index.html" class="title">monaco-editor</a>
				</div>
				<div class="table-cell" id="tsd-widgets">
					<div id="tsd-filter">
						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
						<div class="tsd-filter-group">
							<div class="tsd-select" id="tsd-filter-visibility">
								<span class="tsd-select-label">All</span>
								<ul class="tsd-select-list">
									<li data-value="public">Public</li>
									<li data-value="protected">Public/Protected</li>
									<li data-value="private" class="selected">All</li>
								</ul>
							</div>
							<input type="checkbox" id="tsd-filter-inherited" checked />
							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
							<input type="checkbox" id="tsd-filter-externals" checked />
							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
							<input type="checkbox" id="tsd-filter-only-exported" />
							<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
						</div>
					</div>
					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
				</div>
			</div>
		</div>
	</div>
	<div class="tsd-page-title">
		<div class="container">
			<ul class="tsd-breadcrumb">
				<li>
					<a href="globals.html">Globals</a>
				</li>
			</ul>
			<h1>monaco-editor</h1>
		</div>
	</div>
</header>
<div class="container container-main">
	<div class="row">
		<div class="col-8 col-content">
			<div class="tsd-panel tsd-typography">
				<a href="#primefaces-monaco" id="primefaces-monaco" style="color: inherit; text-decoration: none;">
					<h1>primefaces-monaco</h1>
				</a>
				<p>Monaco editor is the code editor which powers <a href="https://github.com/Microsoft/vscode">VS Code</a>, with the features better described <a href="https://code.visualstudio.com/docs/editor/editingevolved">here</a>.</p>
				<p><code>primefaces-monaco</code> is wrapper for monaco editor that lets your use it as a JSF component.</p>
				<p>This is the documentation for the client-side part of the API, see the <a href="https://github.com/blutorange/primefaces-monaco">project page on github</a> for more info on the project.</p>
				<a href="#overview" id="overview" style="color: inherit; text-decoration: none;">
					<h1>Overview</h1>
				</a>
				<p>You create the monaco editor widget by including it in an XHTML page. A basic
				usage would look like this:</p>
				<pre><code class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">blut:monaco</span> <span class="hljs-attr">widgetVar</span>=<span class="hljs-string">&quot;editor&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;...&quot;</span> <span class="hljs-attr">extender</span>=<span class="hljs-string">&quot;createExtender()&quot;</span>/&gt;</span></code></pre>
				<p>See <a href="../vdldoc/index.html">here</a> for the tag documentation. The client-side API
				consists of the following pieces:</p>
				<ul>
					<li>You can use <code>PF(&quot;editor&quot;)</code> to get access to the widget instance. This will
					return an instance of <a href="./interfaces/primefaces.widget.extmonacoeditorinline.html">ExtMonacoEditorInline</a> or <a href="./interfaces/primefaces.widget.extmonacoeditorframed.html">ExtMonacoEditorFramed</a>.</li>
					<li>If specified, the <code>extender</code> needs to either evaluate to an instance of
						<a href="./interfaces/monacoextenderinline.html">MonacoExtenderInline</a> (inline widget); or
						be an URL to a script that creates an instance of <a href="./interfaces/monacoextenderframed.html">MonacoExtenderFramed</a>
						(framed widget) and saves it to <code>window.MonacoEnvironment.Extender</code>. It lets you
					customize the editor if the widget options should not suffice.</li>
					<li>If you use this widget, the monaco editor library will be loaded and is available
						via <a href="./modules/monaco.html">window.monaco</a>. This is the same as the
					<a href="https://microsoft.github.io/monaco-editor/api/index.html">official monaco editor API</a>.</li>
				</ul>
			</div>
		</div>
		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
			<nav class="tsd-navigation primary">
				<ul>
					<li class="globals  ">
						<a href="globals.html"><em>Globals</em></a>
					</li>
					<li class="label tsd-is-external">
						<span>Internals</span>
					</li>
					<li class=" tsd-kind-namespace">
						<a href="modules/primefaces.html">Prime<wbr>Faces</a>
					</li>
					<li class="label tsd-is-external">
						<span>Externals</span>
					</li>
					<li class=" tsd-kind-namespace tsd-is-external">
						<a href="modules/monaco.html">monaco</a>
					</li>
				</ul>
			</nav>
			<nav class="tsd-navigation secondary menu-sticky">
				<ul class="before-current">
					<li class=" tsd-kind-interface">
						<a href="interfaces/extendercreatemodeloptions.html" class="tsd-kind-icon">Extender<wbr>Create<wbr>Model<wbr>Options</a>
					</li>
					<li class=" tsd-kind-interface">
						<a href="interfaces/monacocontext.html" class="tsd-kind-icon">Monaco<wbr>Context</a>
					</li>
					<li class=" tsd-kind-interface tsd-has-type-parameter">
						<a href="interfaces/monacoextenderbase.html" class="tsd-kind-icon">Monaco<wbr>Extender<wbr>Base</a>
					</li>
					<li class=" tsd-kind-interface">
						<a href="interfaces/monacoextenderframed.html" class="tsd-kind-icon">Monaco<wbr>Extender<wbr>Framed</a>
					</li>
					<li class=" tsd-kind-interface">
						<a href="interfaces/monacoextenderinline.html" class="tsd-kind-icon">Monaco<wbr>Extender<wbr>Inline</a>
					</li>
					<li class=" tsd-kind-interface">
						<a href="interfaces/monacoiframecontext.html" class="tsd-kind-icon">Monaco<wbr>Iframe<wbr>Context</a>
					</li>
					<li class=" tsd-kind-type-alias tsd-has-type-parameter">
						<a href="globals.html#constructor" class="tsd-kind-icon">Constructor</a>
					</li>
					<li class=" tsd-kind-variable tsd-is-external">
						<a href="globals.html#monacoenvironment" class="tsd-kind-icon">Monaco<wbr>Environment</a>
					</li>
					<li class=" tsd-kind-variable">
						<a href="globals.html#monacoextras" class="tsd-kind-icon">monaco<wbr>Extras</a>
					</li>
					<li class=" tsd-kind-function">
						<a href="globals.html#pf" class="tsd-kind-icon">PF</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>
</div>
<footer class="with-border-bottom">
	<div class="container">
		<h2>Legend</h2>
		<div class="tsd-legend-group">
			<ul class="tsd-legend">
				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
				<li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
			</ul>
		</div>
	</div>
</footer>
<div class="container tsd-generator">
	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="assets/js/main.js"></script>
</body>
</html>